<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/product-list.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }

        header h1 {
            margin: 0;
        }

        header a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        header a:hover {
            background-color: #555;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            padding: 0;
        }

        .product-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            width: 220px; /* Adjusted width for better layout */
            text-align: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
        }

        .product-list li:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift effect on hover */
        }

        img {
            max-width: 100%;
            max-height: 150px; /* Set maximum height for consistency */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 5px;
        }

        .add-to-cart {
            background-color: #28a745; /* Green color */
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: auto; /* Push button to bottom */
        }

        .add-to-cart:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .product-description {
            margin-top: 10px; /* Space between button and description */
            font-size: 14px; /* Font size for description */
            color: #666; /* Grey color for description */
        }

        /* Modal Styles */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.4); 
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; 
            padding: 20px;
            border-radius: 8px; /* Rounded corners for modal */
            width: 80%; 
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h1>智能家居</h1>
        <div>
            <a href="index.html">首页</a>
            <a href="cart.html">我的购物车</a>
            <a href="user-center.html">用户中心</a>
        </div>
    </header>
    <ul class="product-list">
        <li>
            <img src="./images/路由器 配件/小米路由器Mesh.jpg" alt="小米路由器Mesh">
            <h3>小米路由器Mesh</h3>
            <p>价格：¥279</p>
            <button class="add-to-cart" onclick="addToCart('小米路由器Mesh', 279)">加入购物车</button>
            <p class="product-description">Mesh网络，全屋覆盖，高速稳定。</p>
        </li>
        <li>
            <img src="./images/路由器 配件/华硕RT-AX82U路由器pg.jpg" alt="华硕RT-AX82U路由器">
            <h3>华硕RT-AX82U路由器</h3>
            <p>价格：¥549</p>
            <button class="add-to-cart" onclick="addToCart('华硕RT-AX82U路由器', 549)">加入购物车</button>
            <p class="product-description">Wi-Fi 6技术，高速传输，游戏体验。</p>
        </li>
        <li>
            <img src="./images/路由器 配件/Anker 65W氮化镓充电器.jpg" alt="Anker 65W氮化镓充电器">
            <h3>Anker 65W氮化镓充电器</h3>
            <p>价格：¥199</p>
            <button class="add-to-cart" onclick="addToCart('Anker 65W氮化镓充电器', 199)">加入购物车</button>
            <p class="product-description">氮化镓技术，快速充电，小巧便携。</p>
        </li>
        <li>
            <img src="./images/路由器 配件/三星T7 移动固态硬盘.jpg" alt="三星T7 移动固态硬盘">
            <h3>三星T7 移动固态硬盘</h3>
            <p>价格：¥799</p>
            <button class="add-to-cart" onclick="addToCart('三星T7 移动固态硬盘', 799)">加入购物车</button>
            <p class="product-description">高速传输，轻薄设计，大容量存储。</p>
        </li>
        <li>
            <img src="./images/路由器 配件/罗技G Pro X机械键盘.jpg" alt="罗技G Pro X机械键盘">
            <h3>罗技G Pro X机械键盘</h3>
            <p>价格：¥1299</p>
            <button class="add-to-cart" onclick="addToCart('罗技G Pro X机械键盘', 1299)">加入购物车</button>
            <p class="product-description">专业游戏键盘，高品质机械轴，RGB背光。</p>
        </li>
        <li>
            <img src="./images/路由器 配件/雷蛇黑寡妇蜘蛛V3 机械键盘.jpg" alt="雷蛇黑寡妇蜘蛛V3 机械键盘">
            <h3>雷蛇黑寡妇蜘蛛V3 机械键盘</h3>
            <p>价格：¥899</p>
            <button class="add-to-cart" onclick="addToCart('雷蛇黑寡妇蜘蛛V3 机械键盘', 899)">加入购物车</button>
            <p class="product-description">绿轴机械键盘，RGB灯效，游戏优化。</p>
        </li>
        <li>
            <img src="./images/电视/xiaomi 电视A系列.jpg" alt="xiaomi 电视A系列">
            <h3>xiaomi 电视A系列</h3>
            <p>价格：¥2999</p>
            <button class="add-to-cart" onclick="addToCart('xiaomi 电视A系列', 2999)">加入购物车</button>
            <p class="product-description">高清显示，智能系统，家庭娱乐中心。</p>
        </li>
        <li>
            <img src="./images/电视/雷鸟 鹤6 Pro 55S585C Pro.jpg" alt="雷鸟 鹤6 Pro 55S585C Pro">
            <h3>雷鸟 鹤6 Pro 55S585C Pro</h3>
            <p>价格：¥3999</p>
            <button class="add-to-cart" onclick="addToCart('雷鸟 鹤6 Pro 55S585C Pro', 3999)">加入购物车</button>
            <p class="product-description">4K超高清，HDR技术，智能电视系统。</p>
        </li>
        <li>
            <img src="./images/电视/Vidda海信 X65 Ultra.jpg" alt="Vidda海信 X65 Ultra">
            <h3>Vidda海信 X65 Ultra</h3>
            <p>价格：¥6999</p>
            <button class="add-to-cart" onclick="addToCart('Vidda海信 X65 Ultra', 6999)">加入购物车</button>
            <p class="product-description">超大屏幕，4K HDR，杜比视界。</p>
        </li>
        <li>
            <img src="./images/电视/小米壁画电视.jpg" alt="小米壁画电视">
            <h3>小米壁画电视</h3>
            <p>价格：¥4999</p>
            <button class="add-to-cart" onclick="addToCart('小米壁画电视', 4999)">加入购物车</button>
            <p class="product-description">超薄设计，高清显示，壁画模式。</p>
        </li>
    </ul>
    <script>
        function addToCart(productName, price) {
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 检查产品是否已在购物车中
            const existingProduct = cart.find(item => item.productName === productName);
            
            if (existingProduct) {
                existingProduct.quantity += 1; // 增加数量
            } else {
                cart.push({ productName, price, quantity: 1 }); // 添加新产品
            }
            
            localStorage.setItem('cart', JSON.stringify(cart)); // 更新购物车
            alert(`${productName} 已加入购物车！价格：${price}元`);
        }
    </script>
</body>

</html>